*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Microsoft YaHei UI','Micrsoft YaHei', arial, sans-serif;
}
a{
    cursor:pointer;
    text-decoration:none;
}
ul li{
    list-style:none;
}
.clearfix:after{
    display:block;
    height:0;
    clear:both;
    visibility:hidden;
    content:'';
}
// 头部样式
header{
    width:100%;
    position:fixed;
    top:0;
    left:0;
    z-index:1000;
    background:#1e1b29;
    .header-in{
        width:1200px;
        margin:0 auto;
        height:30px;
        line-height:30px;
        display:flex;
        justify-content:space-between;
        p{
            a{
                color:#f60;
                font-size:14px;
                line-height:30px;
            }
        }
        ul{
            li{
                float:left;
                list-style:none;
                height:20px;
                line-height:20px;
                border-right:solid 1px #fff;
                margin-top:5px;
                span{
                    color:white;
                }
                a{
                    color:white;
                    font-size:14px;
                    padding:0 10px;
                    &:hover{
                        color:#f60;
                    }
                }
            }
        }
    }
}
//导航样式
nav{
    width:100%;
    height:80px;
    background:#eaeaeb;
    position:fixed;
    top:30px;
    left:0;
    z-index:1000;
    .nav-in{
        max-width:1200px;
        margin:0 auto;
        min-width:1024px;
        div{
            float:left;
        }
        .nav-l{
            width:200px;
            display:flex;
            justify-content:space-content;
            padding-top:20px;
            .logo-r{
                border-left:solid 1px #b3b3b3;
                padding-left:10px;
                padding-top:10px;
                margin-left:10px;
            }
        }
        .nav-r{
            display:flex;
            justify-content:space-between;
            min-width:500px;
            height:80px;
            ul{
               li{
                    width:100px;
                    text-align:center;
                    float:left;
                    height:80px;
                    line-height:80px;
                    position:relative;
                    a{
                        color:#333;
                        &:hover{
                            color:#f60;
                        }
                        span{
                            position:absolute;
                            left:55px;
                            top:-10px;
                        }
                    }
                    .first{
                        color:#f60;
                    }
                }
            }
            p{
                height:80px;
                line-height:80px;
                margin-left:100px;
                a{
                    color:#f60;
                    font-size:14px;
                }
                .login{
                    display:inline-block;
                    width:100px;
                    height:30px;
                    line-height:30px;
                    text-align:center;
                    color:white;
                    background:#f60;
                    border-radius:2px;
                    margin-left:15px;
                }
                .zhuce{
                    margin-left:20px;
                }
            }
        }
    }
}
//地球样式
.earth{
    width:100%;
    height:720px;
     background:url(../img/bj.png) repeat 100% 100%;
    margin-top:110px;
    .earth-in{
        h1{
            padding-left:479px;
            font-size:38px;
            height:60px;
            line-height:60px;
            color:#e5e5e5;
            #zhi{
                color:#3096ff;
            }
            .left,.right{
                display:inline-block;
                background:#3096ff;
                width:10px;
                height:10px;
                margin:0 5px;
                border-radius:50%;
                vertical-align:middle;
                position:relative;
            }
            font{
                color:#3096ff;
                line-height:normal;
            }
        }
        p{
            padding-left:425px;
            font-size:50px;
            color:#3096ff;
            margin:20px 0;
            transform:none;
            opacity:1;
        }
        marquee{
            width:230px;
            height:30px;
            font-size:20px;
            line-height:30px;
            color:#e5e5e5;
            margin-left:590px;
        }
    }
    .show{
        padding-left:490px;
        padding-top:50px;
        .yuan{
            position:relative;
            z-index:1;
            top:0px;
            width:600px;
            height:600px;
            border:solid 1px blue;
            border-radius:100%;
            .dian{
                width:10px;
                height:10px;
                position:absolute;
                top:-5px;
                left:50%;
                margin-left:-5px;
                background:orange;
                border-radius:50%;
            }
        }
        .quan1{
          width:400px;
          position:relative;
          left:-100px;
          height:200px;
          margin:200px auto;
          transform:rotateX(70deg);
          z-index:50;
          position:absolute;
          left:352px;
          top:150px;  
       }
       .quan2{
          width:1200px;
          position:relative;
          left:-100px;
          height:378px;
          margin:200px auto;
          transform:rotateX(57deg) rotateY(161deg);
          z-index:50;
          position:absolute;
          left:-156px;
          top:181px;  
       }
       .quan3{
          width:400px;
          position:relative;
          left:-100px;
          height:378px;
          margin:200px auto;
          transform:rotateX(-63deg) rotateY(-2deg);
          z-index:50;
          position:absolute;
          left:234px;
          top:39px;  
       }
       .quan4{
          width:400px;
          position:relative;
          left:-100px;
          height:378px;
          margin:200px auto;
          transform:rotateX(59deg) rotateY(214deg);
          z-index:50;
          position:absolute;
          left:696px;
          top:189px;  
       }
    }
}
.trend,.operation,.active{
    width:100%;
    height:720px;
    .trend-in,.operation-in,.active-in{
        span,h2,p{

            transition:all 1s ease 0.2s;
            transition-duration:0.5s;
            transform:translated3d(0px,-20px,0px);
            opacity:1;
            color:#4c4c4c;
        }
        span{
            display:inline-block;
            line-height:24px;
            font-size:20px;
            padding-left:638px;
            margin-top:100px;
            transition-delay:0.3s;
        }
        h2{
            font-size:32px;
            line-height:44px;
            margin-top:17px;
            margin-bottom:15px;
            padding-left:488px;
            transition-delay:0.5s; 
        }
        p{
            text-align:center;
            font-size:16px;
            line-height:30px;
            transition-delay:0.7s;
        }
        .iphone{
            width:606px;
            height:340px;
            margin:0 auto;
            margin-top:50px;
            position:relative;
            background:url(../img/11.png) no-repeat 10% 20%/100% 100%;
            .pic{
                position:absolute;
                left:84px;
                top:26px; 
            }
        }
    }
}
//趋势
.trend{
    background:url(../img/p2.jpg) no-repeat 15% 2%/100% 100%;
    .trend-in{
        span,h2,p{
            color:#4c4c4c;
        }
    }
}
//业务
.operation{
    background:url(../img/p3.jpg) no-repeat 15% 2%/100% 100%;
    .operation-in{
            span,h2,p{
                color:#E5E5E5;
        }
        .iphone{
            .pic{
                width:440px;
                height:271px;
            }
        }
    }
}
//活动
.active{
    background:url(../img/p4.jpg) no-repeat 15% 2%/100% 100%;
    .active-in{
        span,h2,p{
            color:#E5E5E5;
        }
        .iphone{
            width:606px;
            height:340px;
            margin:0 auto;
            margin-top:50px;
            position:relative;
            background:url(../img/11.png) no-repeat 10% 20%/100% 100%;
            .iphone-in{
                width:444px;
                height:279px;
                position:absolute;
                left:82px;
                top:20px;
                background:black;
                div{
                    width:210px;
                    height:279px;
                    position:absolute;
                    top:0px;
                }
                .iphone-left{
                    left:0;
                    .pic1,.pic2,.pic3,.pic4{
                        position:absolute;
                    }
                    .pic1{
                        width:210px;
                        height:279px;
                        left:0;
                        top:0;
                    }
                    .pic2{
                        right:0;
                        top:0;
                    }
                    .pic3{
                        width:120px;
                       left:48px;
                       top:85px;
                       &:hover{
                        transition-duration:2s;
                        transform:scale(1.2);
                        }
                    }
                    .pic4{
                        display:inline-block;
                        height:38px;
                        left:-5px;
                        bottom:30px;
                        cursor:pointer;
                        background:url(../img/15.png) no-repeat 10% 10%/20% 100%;
                        &:hover{
                            z-index:10;
                            background:url(../img/find.png) no-repeat 10% 10%/20% 100%;
                        }
                    }
                }
                .iphone-right{
                    right:0;
                    .pic1,.pic2,.pic3,.pic4{
                        position:absolute;
                    }
                    .pic1{
                        width:210px;
                        height:279px;
                        left:0;
                        top:0;
                    }
                    .pic2{
                        right:0;
                        top:0;
                    }
                    .pic3{
                        width:120px;
                       left:48px;
                       top:85px;
                       &:hover{
                        transition-duration:2s;
                        transform:scale(1.2);
                        }
                    }
                    .pic4{
                        display:inline-block;
                        height:38px;
                        left:-5px;
                        bottom:30px;
                        cursor:pointer;
                        background:url(../img/15.png) no-repeat 10% 10%/20% 100%;
                        &:hover{
                            background:url(../img/find.png) no-repeat 10% 10%/20% 100%;
                        }
                    }
                }
                
            }
            
        }
    }
}
//底部样式
footer{
    width:100%;
    height:70px;
    background:#1b1b1b;
    position:fixed;
    left:0;
    bottom:0;
    z-index:40;
    .footer-in{
        width:1200px;
        margin:0 auto;

        #photo1,#photo2{
            position:fixed;
        }
        #photo1{
            left:60px;
            top:289px;
        }
        #photo2{
            left:40px;
            bottom:0;
        }
        .word{
            position:absolute;
            left:205px;
            bottom:0;
            height:100%;
            color:white;
            font-size:18px;
            line-height:70px;
            padding-left:80px;
            .yi{
                display:inline-block;
                margin:0 22px 0 125px;
                .num1{
                    font-size:28px;
                    color:#fe7e01;
                    margin:0 8px;
                }
                .num2{
                    font-size:24px;
                    margin:0 10px;
                }
            }
        }
        #wrap{
            width:300px;
            height:234px;
            position:fixed;
            right:0;
            bottom:70px;
            .swiper-container{
                width:300px;
                height:234px;
                .swiper-slide{
                    width:300px;
                    height:234px;
                    .f1{
                        width:297px;
                    }
                    .f2{
                        width:286px;
                    }
                }
            }
        }
    }
}
#wheel{
    width:606px;
    height:340px;
    margin:0 auto;
    position:fixed;
    left:373px;
    top:342px;
    background:url(../img/11.png) no-repeat 10% 20%/100% 100%;
}
#min{
    width:20px;
    height:80px;
    position:fixed;
    right:20px;
    top:259px;
    li{
        width:10px;
        height:10px;
        background:white;
        border-radius:50%;
        margin-top:10px;
    }
}
//媒体查询
@media only screen and (min-width:500px){
    .nav-r{
            margin-left:230px;
        }
}